<template>
  <BasicModal v-bind="$attrs" @register="bomChangeModal" destroyOnClose :maskClosable="false" :title="title" width="80%" :minHeight="600" @ok="handleSubmit">
    <a-spin :spinning="loading">
      <BasicTable @register="registerTable">
        <template #tableTitle>
          <a-button type="primary" v-if="isUpdate" @click="handleAdd(null)">新增</a-button>
          <a-button type="primary" v-if="isUpdate" :disabled="disReImported" @click="reImportBom">重新导入</a-button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
      </BasicTable>
    </a-spin>
  </BasicModal>
  <ContractBomImptModal @register="bomImptModal" @success="reloadTreeTable"></ContractBomImptModal>
  <ContractBomModal @register="regContractBom" @success="reloadTreeTable"></ContractBomModal>
</template>

<script lang="ts" setup>
import {ref, reactive, computed} from 'vue';
    import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
    import ContractBomImptModal from "./ContractBomImptModal.vue";
    import { useMessage } from '/@/hooks/web/useMessage';
    import {loadTreeData} from '../WmContract.api';
    import {confirmBatchBom,itemDelete} from '../WmContract.api';
    import {imptTreeColumns} from '../WmContract.data'
    import {BasicTable, TableAction} from "@/components/Table";
    import ContractBomModal from "@/views/wmhb/contract/components/ContractBomModal.vue";
    import {useListPage} from "@/hooks/system/useListPage";

    const [bomImptModal,{openModal:openBomImptModal}] = useModal()
    const [regContractBom,{openModal:openContrModal}] = useModal()
    const { createMessage } = useMessage();
    let loading = ref<boolean>(false);
    // 部门树列表数据
    let treeData = ref<any[]>([]);

    const isUpdate = ref(true)

    // Emits声明
    const emit = defineEmits(['register','success']);
    const contract = ref<Recordable>({});

    const disReImported = computed(()=>{
      return ['IMPORT_CONFIRMED','FINISHED'].includes(contract.value.status)
    })

    const { prefixCls,tableContext } = useListPage({
      tableProps:{
           title: '合同产品列表',
           dataSource:treeData,
           columns:imptTreeColumns,
           immediate:false,
           isTreeTable: true,
           showActionColumn:true,
           actionColumn: {
             width: 180,
             fixed:'right'
          }
      }
   })
   const [registerTable, {reload,expandAll}] = tableContext


    //表单赋值
    const [bomChangeModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      isUpdate.value = !!data.isUpdate
      setModalProps({confirmLoading: false,showCancelBtn:true,showOkBtn:isUpdate.value});
      contract.value=data.record
      loadCatalogTreeData(contract.value.id)
    });
    //设置标题
    const title = ref('合同产品修改')
    function loadCatalogTreeData(contractId) {
      loading.value = true;
      treeData.value = [];
      loadTreeData({'wmContractId': contractId,async:false,pcode:''})
        .then((res) => {
          if (!res.success){
            createMessage.error(res.message)
            return
          }
          if (Array.isArray(res.result)) {
              treeData.value = res.result;
            }
        })
        .finally(() => (loading.value = false));
    }

    function getTableAction(record){
      return [
         {
          label: '新增',
          tooltip:'添加子产品',
          onClick: handleAdd.bind(null,record)
         },
         {
          label: '编辑',
          tooltip:'编辑产品',
          onClick: handleUpdate.bind(null,record)
         },
         {
          label: '删除',
          tooltip:'删除产品',
          onClick: handleDelete.bind(null,record)
         }
      ]
    }

    function handleAdd(row){
      openContrModal(true,{
        record:row,
        contract:contract.value,
        isUpdate:false,
        showFooter:true
      })

    }

    function handleUpdate(row){
      openContrModal(true,{
        record:row,
        contract:contract.value,
        isUpdate:true,
        showFooter:true
      })

    }

    function handleDelete(row){
      itemDelete({id:row.id},reloadTreeTable)
    }


    //表单提交事件
    function handleSubmit(v) {
      confirmBatchBom({batchNo:contract.value.batchNo},handleSuccess)
    }

    function reImportBom(){
      openBomImptModal(true,{
         record:contract.value
       })
    }

    function handleSuccess(){
      closeModal()
      emit('success')
    }

    function reloadTreeTable(){
      loadCatalogTreeData(contract.value.id)
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
